<template>
  <div class="login-container">
    <div class="login-back">
      <div class="login">
        <div class="login-title">
          <p>中学科学实验现场考试系统</p>
          <h3>考务管理系统</h3>
        </div>
        <div class="login-logo">
          <img src="@/assets/img/login_logo.png" alt="">
        </div>
        <div class="input-container">
          <p>用户名：</p>
          <el-input class="login-in" v-model="username" @keydown.enter.native="loginUser"></el-input>
          <p>密码：</p>
          <el-input class="login-in" type="password" v-model="password" @keydown.enter.native="loginUser"></el-input>
          <!-- <el-checkbox v-model="checked1" disabled>记住用户名和密码</el-checkbox> -->
          <a href="javascript:;" class="check-login" @click="loginUser">登录</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      // username: 'testuser10',
      // password: 'password123',
      // username: 'testbianpai',
      // password: '12345678',
      username: null,
      password: null,
      checked1: false
    }
  },
  methods: {
    loginUser () {
      let that = this
      that.$http.sysuserLogin({ loginName: that.username, password: that.password }).then((res) => {
        if (res.code === 20000) {
          sessionStorage.setItem('userData', JSON.stringify(res.data.sysRoles[0]))
          sessionStorage.setItem('schoolName', res.data.schoolName)
          sessionStorage.setItem('countyName', res.data.countyName)
          sessionStorage.setItem('area', res.data.countyName)
          let _roleKey = res.data.sysRoles[0].roleKey
          if (_roleKey === 'mark_teacher') {
            this.$router.push({ name: 'startEvaluation' })
          } else if (_roleKey === 'school') {
            this.$router.push({ name: 'schoolStudentInfo' })
          } else if (_roleKey === 'city') {
            this.$router.push({ name: 'examPlan' })
          } else {
            this.$router.push({ name: 'infoManagement' })
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  },
  mounted () {
  }
}
</script>

<style lang="stylus" scoped>
.login-container
  width 100%
  .login-back
    position fixed
    top 0
    bottom 0
    width 100%
    background url('../assets/img/city/back.jpg') no-repeat
    background-size: cover;
    .login
      width 570px
      height 340px
      background #fff
      border-radius 5px
      margin 16% auto
      padding-top 40px
      position relative
      .login-title
        position absolute
        top -176px
        width 570px
        p
          text-align center
          color #fff
          font-size:24px;
        h3
          text-align center
          color #fff
          font-size:30px;
          font-weight:bold;
      .login-logo
        position absolute
        left 240px
        top -45px
        width 90px
        height 90px
        border-radius 50%
        background #fff
        text-align center
        line-height 90px
      .input-container
        width 484px
        margin 0 auto
        p
          line-height 48px
        .login-in
          width 484px
        .check-login
          display inline-block
          text-align center
          position relative
          top 30px
          width 484px
          height 48px
          margin 0 auto
          color #fff
          text-align center
          line-height 48px
          font-size:18px;
          background #4177FF
          border-radius 10px
          text-decoration none

</style>
